<template>
  <!-- v-if="animationEnd"  -->
  <div class="ca-home" ref="caHomeRef">
    <div class="e-text">
      <div class="sec-1">
        <p>2023年</p>
        <p>你共收到<span class="strong-word">{{ stats.caHome.fiveWTasks }}</span>个传播任务，完成<span class="strong-word">{{
          stats.caHome.fiveWShares }}</span>个</p>
        <p v-html="getTxt1()"></p>
      </div>
      <div class="mb-80">
        <p>今年</p>
        <div v-if="stats.caHome.postedNews + stats.caHome.postedPosts > 0">
          <p>你在长安之家共发布了<span class="strong-word">{{ stats.caHome.postedNews + stats.caHome.postedPosts }}</span>篇内容（资讯+帖子）
          </p>
          <p>共收获
            <span v-if="stats.caHome.beViewNews + stats.caHome.beViewPosts > 0">
              <span class="strong-word">{{ stats.caHome.beViewNews + stats.caHome.beViewPosts }}</span>阅读，
            </span>
            <span v-if="stats.caHome.beShares > 0">
              <span class="strong-word">{{ stats.caHome.beShares }}</span>分享，
            </span>
            <span v-if="stats.caHome.beLikeds > 0">
              <span class="strong-word">{{ stats.caHome.beLikeds }}</span>点赞，
            </span>
            <span v-if="stats.caHome.beComments > 0">
              <span class="strong-word">{{ stats.caHome.beComments }}</span>评论
            </span>
          </p>
          <p>新增粉丝<span class="strong-word">{{ stats.caHome.fans }}</span></p>
          <p>
            一份快乐分享后会变成很多份快乐，期待你在新一年分享更多快乐时光！
          </p>
        </div>
        <p v-else>你在长安之家还没有发布任何内容哦，
          <br /> 新的一年， 记得来这里分享快乐时光~
        </p>
      </div>

      <div v-if="stats.caHome.likeds > 0" class="mb-80">
        <p>你从不吝惜赞许</p>
        <p>{{ YEAR }}年</p>
        <p>你一共点赞了<span class="strong-word">{{ stats.caHome.likeds }}</span>篇文章</p>
        <p>愿你在新的一年继续与美好相伴！</p>
      </div>
      <p>更多信息</p>
      <p>请前往长安之家查看...</p>
    </div>
    <img class="e-bg" src="@/assets/img/caHome/caHome.jpg" />
    <!-- <img class="e-star-big" src="@/assets/img/event/star-big.png" />
    <img class="e-star-small" src="@/assets/img/event/star-small.png" /> -->
  </div>
  <!-- <EventIntro v-else @animation-end="handleAnimationEnd" /> -->
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { slideUp, slideDown } from "../../../../utils/slide";
import { YEAR } from "@/config/constants";
// import { changeStatusBarColor } from "@/cordova/common";

const emit = defineEmits(["slideUp", "slideDown"]);
const props = defineProps<{
  stats: any;
}>();
const caHomeRef = ref<any>(null);

watch(caHomeRef, () => {
  slideUp(caHomeRef.value, () => {
    console.log("event");
    emit("slideUp");
  });
  slideDown(caHomeRef.value, () => {
    emit("slideDown");
  });
});
const getTxt1 = () => {
  if (props.stats.caHome.fiveWRate < 100) {
    return `完成率仅<span class="strong-word">${props.stats.caHome.fiveWRate}%</span>，新的一年要加把劲哦！`;
  } else {
    return `完成率高达<span class="strong-word">100%</span>`;
  }
};
</script>

<script lang="ts">

export default {
  name: "CaHome",
};
</script>

<style lang="scss" scoped>
.ca-home {
  @include full-screen-relative;
}

.e-text {
  @include animation-fade-in;
  position: absolute;
  top: 150px;
  left: 64px;
  z-index: 999;
  padding-right: 64px;
  color: $text-blue1;
  font-family: ChangAnunitype;

  h4 {
    margin: 0;
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: bold;
  }

  div {
    // margin-bottom: 20px;
  }

  .sec-1 {
    margin-bottom: 10px;
  }

  p {
    line-height: 56px;
    // margin-bottom: 20px;
  }
}

img {
  position: absolute;
}

.e-bg {
  @include animation-scale;
  bottom: 0;
  left: 228px;
  height: auto;
  width: 100vw;
}

</style>
